@use '@/styles/gobal.scss' as *;

.userRow {
    display: flex;
    align-items: center;
    border-bottom: pxToRem(1) solid #e8e8e8;
    transition: background-color 0.3s;

    &:hover {
        background-color: #f5f5f5;
    }

    &__cell {
        height: pxToRem(60);
        padding: 0 pxToRem(16);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        border-right: pxToRem(1) solid #e8e8e8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:nth-child(1) {
            width: pxToRem(60);
        }

        // 序号
        &:nth-child(2) {
            width: pxToRem(120);
        }

        // 用户名
        &:nth-child(3) {
            width: pxToRem(80);
        }

        // 头像
        &:nth-child(4) {
            width: pxToRem(60);
        }

        // 性别
        &:nth-child(5) {
            width: pxToRem(120);
        }

        // 手机号
        &:nth-child(6) {
            width: pxToRem(200);
        }

        // 个人简介
        &:nth-child(7) {
            width: pxToRem(100);
        }

        // 用户角色
        &:nth-child(8) {
            width: pxToRem(120);
        }

        // 登录账号
        &:nth-child(9) {
            width: pxToRem(120);
        }

        // 登录密码
        &:nth-child(10) {
            width: pxToRem(80);
        }

        // 操作
        &:nth-child(11) {
            width: pxToRem(120);
            border-right: none;
            gap: pxToRem(8);
        }
    }

    &__avatar {
        width: pxToRem(40);
        height: pxToRem(40);
        border-radius: 50%;
        object-fit: cover;
    }

    &__input {
        width: 100%;
        height: pxToRem(32);
        padding: 0 pxToRem(8);
        border: pxToRem(1) solid #d9d9d9;
        border-radius: pxToRem(4);
        outline: none;
        transition: all 0.3s;

        &:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 pxToRem(2) rgba(24, 144, 255, 0.2);
        }
    }

    &__select {
        width: 100%;
        height: pxToRem(32);
        padding: 0 pxToRem(8);
        border: pxToRem(1) solid #d9d9d9;
        border-radius: pxToRem(4);
        outline: none;
        transition: all 0.3s;
        background-color: #fff;

        &:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 pxToRem(2) rgba(24, 144, 255, 0.2);
        }
    }

    &__editBtn,
    &__deleteBtn,
    &__saveBtn,
    &__cancelBtn {
        padding: pxToRem(4) pxToRem(8);
        border: none;
        border-radius: pxToRem(4);
        cursor: pointer;
        font-size: pxToRem(12);
        transition: all 0.3s;
    }

    &__editBtn {
        background-color: #1890ff;
        color: #fff;
        margin-right: pxToRem(4);

        &:hover {
            background-color: #40a9ff;
        }
    }

    &__deleteBtn {
        background-color: #ff4d4f;
        color: #fff;

        &:hover {
            background-color: #ff7875;
        }
    }

    &__saveBtn {
        background-color: #52c41a;
        color: #fff;
        margin-right: pxToRem(4);

        &:hover {
            background-color: #73d13d;
        }
    }

    &__cancelBtn {
        background-color: #d9d9d9;
        color: #333;

        &:hover {
            background-color: #bfbfbf;
        }
    }
}